Nuxt Content
概要
ドキュメントをパースしてヘッドレスCMSみたいに配信してくれるやつ
Markdown, JSON, YAML および CSV ファイルに対応
デモ動画
https://res.cloudinary.com/nuxt/video/upload/v1588091670/nuxt-content_wxnjje.mp4
導入
ライブラリ追加
code:sh
$ yarn add @nuxt/content
モジュール記述
code:nuxt.config.js
/*
** Nuxt.js modules
*/
modules: [
'@nuxt/content'
],
(TSのみ)tsconfig.json に @nuxt/types および @nuxt/content 追加
Context 型に $content を適用させるため
code:tsconfig.json
{
"compilerOptions": {
"types": [
"@nuxt/types",
"@nuxt/content"
]
ドキュメントの置き場所
root 直下に /content ディレクトリを作成し、その中に置く
以下の例ではさらに /artists ディレクトリを挟んでいる
code:zion-t.md
# Zion.T
## Biography
- a
- b
- c
## Video
ページでの利用
asyncData({ $content }) などのフックで $content として参照
$content({ディレクトリの場所}).fetch() でフェッチ
ここでは _slug.vue と変数ルーティングを使っているので params.artist を参照している
ここでは doc に入れたので、nuxt-content タグで :document="doc" として展開
code:_slug.vue.ts
<template>
<nuxt-content :document="doc"></nuxt-content>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData({ $content, params }) {
const doc = await $content(artists/${params.artist}).fetch()
return { doc }
}
})
</script>
できました
ちなみに自分の環境下だとデモ動画みたいに $content(slug || 'index') はうまくいかなかった
Vueコンポーネントも表示できる
/content 下に置くと勝手に import されるっぽい?
詳しくはドキュメント参照
CSVデータのフェッチ
code:shell
% tree . -N
.
├── content
│ └── song.csv
code:typescript
import Vue from 'vue'
export default Vue.extend({
async asyncData({ $content }) {
const songs = await $content('songs').fetch()
return { songs }
},
})
code:output
{
"dir": "/",
"slug": "songs",
"path": "/songs",
"extension": ".csv",
"body": [
{
"id": 101,
"title": "あいたくて",
"initial": "あ",
"writer": "工藤直子",
"composer": "新実徳英",
"arranger": ""
},
]
}
CSVをフェッチするとタイトル行に対する列の値のペアとしてcollectionが返ってくる
bodyの中に配列として入ってるのでクエリ操作ができなかった(自分がちゃんと取得できなかっただけかもしれない)
👍 tamuraryoya tamuraryoya.icon がいいねしました on 2020/5/25
👍 onuma onuma.icon がいいねしました on 2020/5/26